<div class="video-bg">
  <WingBlank>
    <Carousel 
        [infinite]="false"
        [vertical]="false"
        [dots]="false"
        swipeSpeed = 30
        (beforeChange)="beforeChange($event)"
        (afterChange)="afterChange($event)"

    >
      <CarouselSlide  id="CarouselSlide{{i}}" *ngFor="let item of videosData;let i = index">
        <app-hivideo *ngIf="item.substring(item.lastIndexOf('.')) === '.mp4';else elseBlock" [index]=i  [videoSrc]="item" [cssStyle]="'height:100vh'" [playIconCssStyle]="playIconCss" [autohide]="false" [autoPlay]="true"  [forVideos]=true></app-hivideo>
        <ng-template #elseBlock>
          <div class="img" appDebounceClick (debounceClick)="cancel()">
            <img src="{{item}}">
          </div>
        </ng-template>
      </CarouselSlide>
    </Carousel>
  </WingBlank>
  
  <p class="title-bg">
      <img *ngIf="test" src="assets/icon/nav_icon_back_fw.png" alt="" class="nav-back" appDebounceClick (debounceClick)="cancel()">
    <span *ngIf="titleTips" class="title">{{titleTips}}</span>
  </p>
  <ng-container *ngIf="test">

    <div class="footer-info-bg" [ngClass]="{'hidden': showDaggerProgress}">
      <!-- 默认的小进度 -->
      <div class="play-progress" id="play-progress" >
        <div class="play-progress-inner-bg">
          <p class="play-progress-inner" id="play-progress-inner" [ngClass]="{'hidden': hiddedMinPlayProgress}"></p>
        </div>
      </div>
    </div>
    <!-- loading -->
  <div class="loading-bg" [ngClass]="{'hidden': hiddenLoading}">
    <p class="loading"></p>
  </div>
    <!-- 进度条的时间 -->
    <div class="footer-drag-progress-bg"  [ngClass]="{'transparent': !showDaggerProgress}">  
      <div class="footer-drag-progress-time-bg">
        <span class="current-time">{{currentTime}}</span>
        <span class="time-sep">/</span>
        <span class="total-time">{{totalTime}}</span>
      </div>    
    </div>
    <div class="footer-drag-progress" id="footer-drag-progress" [ngClass]="{'transparent': !showDaggerProgress}">
      <ion-range #range min="0" (ionChange)="rangeChange($event)" (ionBlur)="rangeOff($event)" max="100" (ionFocus)="rangeOn($event)">
      </ion-range>
    </div> 
  </ng-container>
</div>